<template>
  <div class="EmergencyList-form">
    <el-form ref="formInlines" :validate-on-rule-change="false" :inline="true" :model="form"
      :disabled="formConfig.disabled" :rules="formConfig.rules ? formConfig.rules : {}" size="small">
      <div class="EmergencyList-dialog-form-item">
        <el-form-item v-for="(item, index) in filterForm" :key="index" :class="item.class" :prop="item.prop"
          :label-width="item.lableWidth ? item.lableWidth : '150px'" :label="item.label ? item.label + '：' : ''">
          <!-- 输入框 -->
          <div :class="item.isDisabled ? 'input_readonly' : ''"
            v-if="['input', 'textarea', 'number'].includes(item.type)">
            <div v-if="item.isDisabled">{{ form[item.prop] }}</div>
            <el-input v-else autosize style="color: #3270ff;" :readonly="item.isDisabled ? true : false" :type="item.type"
              :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请输入'" resize="none"
              v-model="form[item.prop]" :min="item.min" :max="item.max" :maxlength="item.maxlength"
              @input="((val) => { handleInput(val, item) })">
            </el-input>
          </div>
          <!-- switch开关 -->
          <div v-if="item.type === 'switch'">
            <el-switch v-model="form[item.prop]" @change="(val) => { switchChange(val, item) }" :width="item.width"
              :disabled="item.disabled" :active-value="item.active_value" :inactive-value="item.inactive_value"
              :active-text="item.active_text" :inactive-text="item.inactive_text" :active-color="item.active_color"
              :inactive-color="item.inactive_color" />
          </div>
          <!-- 下拉框 -->
          <div v-if="item.type === 'select'" :class="item.isDisabled ? 'input_readonly' : ''">
            <!-- <el-input v-if="item.isDisabled" type="text" readonly :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请输入'" resize="none" v-model="form[item.name]">
            </el-input> -->
            <div v-if="item.isDisabled">{{ form[item.name] }}</div>
            <el-select @remove-tag.stop="removeTag" :filterable="item.filterable ? item.filterable : false"
              @clear="clearValue('select', item)" v-else v-model="form[item.prop]"
              :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请选择'" clearable
              @change="((val) => { changeEvent(val, item) })" :multiple="item.multiple ? item.multiple : false"
              :class="item.multiple ? '' : 'el-input__innerHeight'">
              <el-option v-for="(item, index) in item.option" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
          <!-- 时间选择框 单选 -->
          <div v-if="item.type === 'dataPicker' && item.dateType === 'datetime'"
            :class="item.isDisabled ? 'input_readonly' : ''">
            <!-- <el-input v-if="item.isDisabled" type="text" readonly :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请输入'" resize="none" v-model="form[item.prop]">
            </el-input> -->
            <div v-if="item.isDisabled">{{ form[item.prop] }}</div>
            <el-date-picker :type="item.pickerType ? item.pickerType : 'datetime'" v-else
              :picker-options="item.pickerOption ? item.pickerOption : startPickerOptions" placeholder="请选择"
              :value-format="item.format ? item.format : 'yyyy-MM-dd HH:mm:ss'" clearable v-model="form[item.prop]"
              :disabled="item.isDisabled" style="width: 100%">
            </el-date-picker>
          </div>
          <!-- 时间选择框 双选 -->
          <div v-if="item.type === 'dataPicker' && item.dateType === 'datetimerange'"
            :class="item.isDisabled ? 'input_readonly' : ''">
            <div v-if="item.isDisabled" class="flex timeBox">
              <!-- <el-input type="text" readonly :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请输入'" resize="none" v-model="form[item.start]" /> -->
              <div>{{ form[item.start] }}</div>
              <span style="margin:0 5px">至</span>
              <div>{{ form[item.end] }}</div>
              <!-- <el-input type="text" readonly :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请输入'" resize="none" v-model="form[item.end]" /> -->
            </div>
            <div class="flex" v-else>
              <el-date-picker :type="item.pickerType ? item.pickerType : 'datetime'"
                :value-format="item.format ? item.format : 'yyyy-MM-dd HH:mm:ss'" v-model="form[item.start]"
                :editable=false :picker-options="item.StartPickerOptions ? item.StartPickerOptions : startPickerOptions"
                :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '选择日期'"
                @change="(val) => { pickerChange(val, item, 1) }">
              </el-date-picker>
              <span style="margin:0 5px">至</span>
              <el-date-picker :type="item.pickerType ? item.pickerType : 'datetime'"
                :value-format="item.format ? item.format : 'yyyy-MM-dd HH:mm:ss'" v-model="form[item.end]" :editable=false
                :picker-options="item.EndPickerOptions ? item.EndPickerOptions : endPickerOptions"
                :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '选择日期'"
                @change="(val) => { pickerChange(val, item, 2) }">
              </el-date-picker>
            </div>
            <!-- <el-date-picker v-else :picker-options="pickerOptions" @change="pickerChange" v-model="form[item.prop]" value-format="yyyy-MM-dd HH:mm:ss" :disabled="item.isDisabled" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
          </div>
          <el-radio-group v-model="form[item.prop]" @change="(val) => { change(val, item) }" v-if="item.type === 'radio'">
            <el-radio v-for="(i, j) in item.radio" :key="j" :disabled="i.isDisabled" :label="i.value">{{ i.label
            }}</el-radio>
          </el-radio-group>
          <el-input-number v-else-if="item.type === 'inputNumber'" controls-position="right" type="number"
            :min="item.min ? item.min : 1" :max="item.max ? item.max : 99" placeholder="请输入" resize="none"
            v-model="form[item.prop]" :disabled="item.isDisabled" @input="((val) => { handleInput(val, item) })">
          </el-input-number>
          <el-button v-else-if="item.type === 'button'" type="primary" size="mini" style="width:220px;font-size:14px"
            @click="getResourcesData(name, 1)" :disabled="item.isDisabled">
            {{ item.btnName }}
          </el-button>
          <el-button v-else-if="item.type === 'btnInput'" type="text" size="small" class="TeamChoose"
            :class="item.noBorder ? 'buttonNoBorder' : ''" @click="getResourcesData(name, 1)" :disabled="item.isDisabled"
            :style="{ display: item.hidden ? 'none' : 'block' }">
            {{ item.value ? item.value : '点击选择' }}<i v-show="!item.close" @click.stop="handleBtnInput(item)"
              style="color: #ccc;float: right;margin-right: 5px;" class="el-icon-circle-close el-icon--right"></i>
          </el-button>
          <div class="inputAndbtn" v-else-if="item.type === 'inputAndbtn'">
            <el-input type="text" :value="item.value" size="small" v-model="form[item.prop]" style="width:120px"
              :disabled="item.isDisabled">
            </el-input>
            <el-button size="mini" type="primary" style="width:100px;font-size:14px" @click="getResourcesData(name, 2)">
              {{ item.btnName }}</el-button>
          </div>
          <el-upload ref="uploadFile" v-if="item.type === 'upload'" class="upload-demo"
            :accept="item.accept ? item.accept : '.jpg,.png,.pdf,.doc'" :auto-upload="item.autoUpload"
            :http-request="item.httpRequest" :action="item.action" :disabled="item.isDisabled" :on-preview="handlePreview"
            :on-success="handleupdata" :on-change="handleChange" :before-upload="handleBeforeUpload"
            :on-remove="handleRemove" multiple :limit="item.limit" :file-list="fileList">
            <!-- 自定义内容 -->
            <slot v-if="item.customize" :name="item.slot"></slot>
            <!-- 默认只展示上传按钮 -->
            <el-button v-else size="mini" style="color: #3270ff">上传</el-button>
            <div slot="tip" class="el-upload__tip">
              {{ item.tip ? item.tip : "支持jpg/png/pdf/doc等文件，且不超过20mb" }}
            </div>
          </el-upload>
          <div v-if="item.type === 'cascader'" :class="item.isDisabled ? 'input_readonly' : ''">
            <!-- <el-input v-if="item.isDisabled" type="text" readonly :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请输入'" resize="none" v-model="form[item.name]">
            </el-input> -->
            <div v-if="item.isDisabled">{{ form[item.name] }}</div>
            <el-cascader v-else :show-all-levels="item.showAll ? item.showAll : false" :clearable="item.clearable"
              checkStrictly :props="item.props" v-model="form[item.prop]" :options="item.option"
              @change="((val) => { handleCascaderChange(val, item, index) })" :disabled="item.isDisabled">
            </el-cascader>
          </div>
          <div v-if="item.type === 'chooseCascader'" :class="item.isDisabled ? 'input_readonly' : 'chooseCascader'">
            <div v-if="item.isDisabled">{{ form[item.name] }}</div>
            <el-cascader v-else :class="item.class" :show-all-levels="item.showAll ? item.showAll : false"
              :clearable="item.clearable" checkStrictly :props="item.props" v-model="form[item.name]"
              :options="item.option" @change="((val) => { handleCascaderChange(val, item, index) })"
              :disabled="item.isDisabled">
              <template slot-scope="{ node, data }">
                <div :class="!data.children ? 'treeBox' : ''">
                  <span>{{ data.orgName }}</span>
                  <div :class="!data.children ? 'treeInput' : ''">
                    <el-input v-if="!data.children" @input="(value) => { treeInput(value, data, node) }"
                      v-model="data.porgName"></el-input>
                  </div>
                  <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
                </div>
              </template>
            </el-cascader>
          </div>
          <div v-if="item.type === 'selectTree'" :class="item.isDisabled ? 'input_readonly' : ''">
            <div v-if="item.isDisabled">{{ form[item.prop] }}</div>
            <el-select v-else :ref="item.ref" :popper-append-to-body="false" :disabled="item.disabled"
              @clear="clearValue('selectTree', item)" @remove-tag="(val) => removeTag(val, item)"
              v-model="form[item.prop]" :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请选择'"
              clearable @change="((val) => { changeEvent(val, item) })" :multiple="item.multiple ? item.multiple : false"
              :class="item.multiple ? '' : 'el-input__innerHeight'" @visible-change="visibleChange(item)">
              <el-option disabled value="">
                <div class="title">
                  <span>{{ item.title }}</span>
                  <i class="el-icon-close close" @click="closeSelectTree(item)"></i>
                </div>
                <div class="treeList">
                  <div class="treeSerch">
                    <!-- <el-form-item style="width:90%"> -->
                    <el-input placeholder="输入关键字进行过滤" v-model="serchForm[item.keyWord]"
                      @input="(value) => { treeSerch(value, item) }">
                    </el-input>
                    <!-- </el-form-item> -->
                  </div>
                  <div class="treeStructure">
                    <el-tree :ref="item.treeRef" :filter-node-method="(value, data) => filterNode(value, data, item)"
                      :data="item.treeData.data" node-key="id" :default-expanded-keys="item.treeData.default"
                      :default-checked-keys="item.treeData.checked" :props="item.treeData.props"
                      @node-click="(data, node) => { handleNodeClick(data, node, item, index) }">
                      <template slot-scope="{ node, data }">
                        <div class="treeBox">
                          <span>{{ data[item.treeData.props.label] }}</span>
                          <div v-if="item.choose" class="treeInput">
                            <el-input @input="(value) => { treeInput(value, data, node) }"
                              v-model="data.porgName"></el-input>
                          </div>
                        </div>
                      </template>
                    </el-tree>
                    <div v-if="item.choose" class="treeTitle">参培人数</div>
                  </div>
                </div>
              </el-option>
            </el-select>
          </div>
          <slot name="formTable"></slot>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
export default {
  props: {
    formConfig: {
      type: Object,
      default: () => { }
    },
    name: {
      type: String,
      default: ""
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    filterForm() {
      // 同时存在show和hidden 属性的form-item有值才显示，
      // 如果存在show不存在hidden属性的全部隐藏占位
      if (this.formConfig.formData) {
        const formDta = cloneDeep(this.formConfig.formData);
        return formDta.map((item, index) => {
          if (item.show) {
            if (!this.form[item.prop]) {
              item.label = "";
            }
          }
          return item;
        }).filter((item, index) => {
          if (item.show) {
            return item.hidden ? this.form[item.prop] : true;
          } else {
            return true;
          }
        });
      } else {
        return []; // 解决eslint提示：强制执行计算属性中存在的返回语句
      }
    }
  },
  data() {
    return {
      // 组织机构树筛选
      input: "",
      form: {},
      serchForm: {},
      fileList: [],
      fileLists: [],
      fileSize: "",
      flag: false,
      // 控制时间选择器开始时间不能大于结束时间
      startPickerOptions: {
        // disabledDate (time) {
        //   return time.getTime() + 86400000 < Date.now();
        // }
      },
      // 控制时间选择器开始时间不能大于结束时间
      endPickerOptions: {
        // disabledDate (time) {
        //   return time.getTime() + 86400000 < Date.now();
        // }
      },
      dataTime: ""
    };
  },
  methods: {
    switchChange(val, item) {
      console.log(val, item);
      this.$emit("switchChange", val, item);
    },
    closeSelectTree(item) {
      this.treeSerch("", item);
      this.$refs[item.ref][0].blur();
      this.$emit("closeSelectTree", item);
    },
    // 组织机构树结构输入事件
    treeSerch(value, item) {
      this.serchForm[item.keyWord] = value;
      this.$refs[item.treeRef][0].filter(value);
    },
    // 组织机构选人数事件
    treeInput(value, data, node) {
      this.$emit("treeInput", value, data, node);
    },
    checkOrgType(orgType, data, node, item) {
      const name = `${item.treeData.props.label}`;
      const value = `${item.treeData.props.value}`;
      let bz = "";
      let dep = "";
      let unit = "";
      let id = "";
      if (item.chooseUnit) {
        if (orgType !== "1") {
          if (orgType === "2") {
            dep = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            } else {
              dep = `${node.parent.data.orgName}${dep}`;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                }
              }
            }
          } else if (orgType === "3") {
            bz = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "2") {
              dep = node.parent.data.orgName;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                } else {
                  dep = `${node.parent.parent.parent.data.orgName}${dep}`;
                  if (node.parent.parent.parent.parent.data.orgType === "1") {
                    unit = node.parent.parent.parent.parent.data.orgName;
                  } else {
                    dep = `${node.parent.parent.parent.parent.data.orgName}${dep}`;
                  }
                }
              }
            } else if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            }
          }
        } else {
          unit = data.orgName;
          id = data.id;
        }
      } else {
        if (orgType !== "1") {
          if (orgType === "2") {
            dep = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            } else {
              dep = `${node.parent.data.orgName}${dep}`;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                }
              }
            }
          } else if (orgType === "3") {
            console.log(12);
            bz = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "2") {
              dep = node.parent.data.orgName;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                } else {
                  dep = `${node.parent.parent.parent.data.orgName}${dep}`;
                  if (node.parent.parent.parent.parent.data.orgType === "1") {
                    unit = node.parent.parent.parent.parent.data.orgName;
                  } else {
                    dep = `${node.parent.parent.parent.parent.data.orgName}${dep}`;
                  }
                }
              }
            } else if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            }
          }
        }
      }
      const orgConfig = {
        [name]: `${unit}${dep}${bz}`,
        [value]: id
      };
      return orgConfig;
    },
    // 组织机构点击事件
    handleNodeClick(data, node, item, index) {
      let nowOrgName = "";
      let nowId = "";
      let parentName = "";
      // 配置默认点击事件
      if (item.commonClick) {
        nowOrgName = data[item.treeData.props.label];
        nowId = data[item.treeData.props.value];
        parentName = "";
        if (item.isSplice) {
          const orgConfig = this.checkOrgType(data.orgType, data, node, item);
          if (orgConfig[item.treeData.props.label]) {
            if (item.multiple) {
              if (this.form[item.name].includes(orgConfig[item.treeData.props.value])) return;
              else {
                this.form[item.prop].push(orgConfig[item.treeData.props.label]);
                this.form[item.name].push(orgConfig[item.treeData.props.value]);
              }
            } else {
              this.$set(this.form, `${item.prop}`, orgConfig[item.treeData.props.label]);
              this.$set(this.form, `${item.name}`, orgConfig[item.treeData.props.value]);
            }
          }
        } else {
          // 判断是否是多选
          if (item.multiple) {
            if (nowId !== "") {
              if (this.form[item.name].includes(nowId)) return;
              else {
                this.form[item.prop].push(`${parentName}${nowOrgName}`);
                this.form[item.name].push(nowId);
              }
            }
          } else {
            this.$set(this.form, `${item.prop}`, `${parentName}${nowOrgName}`);
            this.$set(this.form, `${item.name}`, nowId);
          }
        }
        this.$emit("handleNodeClick", item, nowId, index, data, node, this.form);
      } else {
        this.$emit("handleNodeClick", data, node, item, index);
      }
      // 配置是否点击后关闭对应弹窗
      if (item.clickClose && nowOrgName) {
        this.closeSelectTree(item);
      }
    },
    // 组织机构过滤筛选
    filterNode(value, data, item) {
      if (!value) return true;
      if (data[item.treeData.props.label]) {
        return data[item.treeData.props.label].indexOf(value) !== -1;
      }
    },
    // 清空事件
    clearValue(type, item) {
      console.log(type);
      console.log(item);
      switch (type) {
        case "selectTree":
          if (item.multiple) {
            this.form[item.prop] = [];
            this.form[item.name] = [];
          } else {
            this.form[item.prop] = "";
            this.form[item.name] = "";
          }
          break;
        case "select":
          this.form[item.prop] = "";
          this.form[item.name] = "";
          this.$emit("clearValue");
          break;
        default:
          this.form[item.prop] = "";
          break;
      }
    },
    handleupdata(response, file, fileList) {
      this.$emit("handleupdata", response, file, fileList);
    },
    handlePreview(file) {
      this.$emit("handlePreview", file);
    },
    handleChange(event, file, fileList) {
      this.fileSize = event.size; // 获取文件大小
      this.$emit("handleChange", file, fileList);
    },
    handleBeforeUpload(file) {
      const maxFileSize = 20 * 1024 * 1024;
      let flag = true;
      if (this.fileSize > maxFileSize) {
        this.$message({
          message: "上传文件大小不得大于20MB!",
          type: "error"
        });
        this.fileList = [];
        flag = false;
      }
      if (flag) {
        this.$emit("handleBeforeUpload", file, this.fileList);
      }
    },
    getResourcesData(type, index) {
      this.$emit("getResourcesData", type, index);
    },
    // radio单选框change事件
    change(val, item) {
      if (item.name) {
        item.radio.map(i => {
          if (val === i.value) {
            this.form[item.name] = i.label;
          }
        });
      }
      this.$emit("change", val, item);
    },
    // 下拉框change事件
    changeEvent(val, item) {
      const label = [];
      if (item.name) {
        item.option && item.option.map(i => {
          if (val instanceof Array) {
            val.map(j => {
              if (j === i.value) {
                label.push(i.label);
              }
              this.form[item.name] = label;
            });
          } else {
            if (val === i.value) {
              this.form[item.name] = i.label;
            }
          }
        });
      }
      this.$emit("changeEvent", val, item);
    },
    visibleChange(item) {
      const result = item.prop;
      this.$refs.formInlines.validateField(`${result}`); // 重复校验一次影响范围
    },
    // 下拉框多选移出事件
    removeTag(val, item) {
      const result = this.handleRemoveTag(val, item.treeData.data, item.treeData.props);
      this.form[item.name] = this.form[item.name].filter(i => i != result);
      this.$emit("removeTag", val);
    },
    // 递归查询删除的id
    handleRemoveTag(name, item, props) {
      return item.reduce((acc, curr) => {
        if (acc) return acc; // 如果已经找到了，就直接返回
        if (name.includes(curr[props.label])) return curr[props.value]; // 如果当前节点的名字匹配，就返回 id
        if (curr.children) return this.handleRemoveTag(name, curr.children, props); // 如果当前节点有 children，就递归查找
        return acc; // 否则返回 acc（即上一次的结果）
      }, null); // 初始值为 null
    },
    // 时间选择事件 双选
    pickerChange(val, item, num) {
      // this.form[item.prop] = val;
      if (num === 1) {
        this.form[item.start] = val;
      } else {
        this.form[item.end] = val;
      }
      this.$emit("pickerChange", val, item, num);
    },
    // 联级选择器change事件
    handleCascaderChange(val, item, index) {
      if (item.id) {
        this.form[item.id] = val;
      }
      this.$emit("handleCascaderChange", val, item, index);
    },
    handleRemove(file, fileList) {
      this.$emit("handleRemove", file, fileList);
    },
    resetFields() {
      this.$refs.formInlines.resetFields();
    },
    clearValidate() {
      this.$refs.formInlines.clearValidate();
    },
    isValidate() {
      this.$refs.formInlines.validate((valid) => {
        this.flag = valid;
      });
    },
    // input事件
    handleInput(val, item) {

      this.$emit("handleInput", val, item);
    },
    // btnInput清除点击事件
    handleBtnInput(item) {
      this.$emit("handleBtnInput", item);
    }
  }
  // watch: {
  //   keyWord (val) {
  //     this.$refs.tree.filter(val);
  //   }
  // }
};
</script>

<style lang="less" scoped>
@import "../assets/style/pop-upNotification.less";

.EmergencyList-dialog-form-item {
  // display: flex;
  // justify-content: space-between;
  // flex-wrap: wrap;
  font-size: 16px;
}

:deep.el-form-item {
  margin-right: 0 !important;
  display: flex !important;
  margin-bottom: 15px;
  // align-items: center;
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  font-size: 28px;
  position: relative;
  top: 10px;
  line-height: 28px;
}

:deep(.el-textarea__inner) {
  // min-height: 80px !important;
  font-family: none;
}

:deep(.el-input-number--small) {
  width: 220px;
}

.threeInputOrSelcet {
  :deep(.el-input__inner) {
    width: 220px;
    font-size: 16px !important;
  }

  :deep(.el-select) {
    width: 220px;
  }

  .inputAndbtn {
    :deep(.el-input__inner) {
      width: 120px;
      font-size: 16px !important;
    }
  }
}

:deep(.el-input-group__append) {
  background-color: #fff;
}

:deep(.el-input__inner) {
  font-size: 16px !important;
}

.TeamChoose {
  width: 220px;
  height: 35px;
  border: 1px solid #ccc;
  text-decoration: underline;
}

.input_readonly {
  // height: 100%;
  display: flex;
  align-items: center;
  line-height: 35px;

  div {
    font-size: 16px;
    color: #606266;
  }

  :depp(.el-input--small) {
    display: flex;
    align-items: center;
  }

  :deep(.el-input__inner) {
    font-size: 16px !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
  }

  :deep(.el-textarea__inner) {
    font-size: 16px !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
  }
}

.flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.timeBox {
  :deep(.el-input--small) {
    width: 150px !important;
  }
}

// .el-input__innerHeight {
:deep(.el-input__inner) {
  // height: 35px !important;
  min-height: 35px;
  line-height: 35px !important;
}

:deep(.el-form-item__label) {
  padding: 0 8px 0 0;
  height: 35px !important;
  line-height: 35px !important;
}

// }

:deep(.el-input__icon) {
  line-height: 35px !important;
}

:deep(.el-input--suffix .el-input__inner) {
  padding-right: 0 !important;
}

::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}

.buttonNoBorder {
  border: none !important;
  width: 80px !important;

  :deep(.el-button) {
    border: none !important;
    width: 80px !important;
  }
}

.treeBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 40px;

  .treeInput {
    width: 55px;
    padding-left: 10px;

    :deep(.el-input__inner) {
      width: 55px;
      height: 20px;
      line-height: 20px !important;
      min-height: 20px;
      padding: 0 5px;
    }
  }
}

// :deep(.el-cascader-menu:last-child .el-cascader-node, .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child) {
//   margin-bottom: 10px !important;
// }
:deep(.el-cascader-node) {
  margin-bottom: 8px !important;
  padding-right: 0px !important;
}

:deep(.el-select-dropdown__wrap) {
  max-height: none;
}

:deep(.el-select-dropdown__list) {
  padding: 1px 0;
}

:deep(.el-select-dropdown__item) {
  height: 300px;
  padding: 0;

  &.is-disabled {
    cursor: default;
  }

  &.selected {
    font-weight: normal;
  }
}

:deep(.el-select-dropdown__item.hover) {
  background-color: transparent;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  background-color: #5b7df5;
  color: #fff;
  padding: 0 10px;
  font-weight: 700;

  .close {
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
  }
}

.treeList {
  max-height: 280px;
  overflow-y: auto;

  // display: flex;
  // justify-content: space-between;
  // position: relative;
  .treeStructure {
    position: relative;

    .treeTitle {
      // float: right;
      width: 65px;
      height: 30px;
      position: absolute;
      top: -25px;
      right: 31px;
      color: #606266;
      background-color: #fff;
      z-index: 999;
    }
  }

  // div {
  //   // padding-right: 30px;
  //   // position: absolute;
  //   // top: -20px;
  // }
}

.treeTitle {
  float: right;
}

.custom-node {
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.node-icon {
  width: 10px;
  margin-right: 7px;
}

// .node-checked {
//   margin-right: 5px;

// :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
//   border-color: #5B7DF5;
// }
:deep(.el-checkbox__inner:hover) {
  border-color: #5b7df5;
}

:deep(.el-select-dropdown__item) {
  padding: 0 !important;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #fff;
  border-color: #5b7df5;

  &::after {
    border-color: #5b7df5;
  }
}

// }

.node-active {
  text-decoration: underline;
  color: #5b7df5;
}

:deep(.el-select-dropdown__item) {
  padding: 0px !important;
}

:deep(.el-tree-node__children) {
  padding-bottom: 3px;
}

.treeList {
  width: 100%;
  display: flex;
  flex-direction: column;

  .treeSerch {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 27px;

    :deep(.el-input) {
      width: 75% !important;
      height: 30px;
    }

    :deep(.el-input__inner) {
      height: 30px !important;
      min-height: 30px !important;
      line-height: 30px !important;

      &::placeholder {
        // color: red;
        font-size: 14px !important;
      }
    }
  }
}

:deep(.el-tree-node__content) {
  height: 30px;
}
</style>
